<template>
  <div class="todo-footer">
        <label>
          <!-- 第二十三步：全选按钮的第二种方法：
              直接把全选框的checked属性双向绑定给计算属性，因为计算属性可读可写
              可以在计算属性的set方法中把多选框的checked属性设置给数据的每一项选框,set方法的
              在get方法中遍历数据的每一项，如果都是true，就获取true给全选框的checked属性
           -->
          <input type="checkbox" v-model="allIsChecked"/>
        </label>
        <span>
          <!-- 第二十五步：写全部数量和已完成数量，全部数量就是数据的length,
            已完成数量交给计算属性
           -->
          <span>已完成{{finishHandle}}</span> / 全部{{todoList.length}}
        </span>
      <!--第二十七步：给清除已完成任务绑定点击事件，事件函数要写在app中传过来  -->
        <button class="btn btn-danger" @click="deleteAllHandle">清除已完成任务</button>
      </div>
</template>

<script>
export default {
    name:'Footer',
    props:["todoList","checkAllHandle","deleteAllHandle"],
   
    computed:{
      allIsChecked:{
        get(){
           // 第二十二步：用every方法遍历数据的done，所有都为true时把true给到多选框的checked属性
    // 注意：v-bind只能由data控制属性中的值，v-model才可以双向控制
            return this.todoList.every((item)=>{
    // 注意：我们需要在数据为0时，把全部选中的按钮取消全选,所以计算属性的返回值需要再加一个判断，且数据不为0才返回true
              return (item.done)
          })&& this.todoList.length!==0
        },
        set(value){
          // 因为把checked属性绑定给了计算属性，所以在set方法的形参中可以获取到当前选框的checked的值
          this.checkAllHandle(value)
        }
       
      },
      finishHandle(){
      //第二十六步：用reduce方法，遍历todolist中的done，如果为true 就让初始值加1，否则就返回初始值 
        return this.todoList.reduce((p,c)=>(c.done?p+1:p),0)
      }
    }
}
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>